<template>
  <div id="historylog">
    <div class="top">
      <el-button type="primary" @click="ClickFound">高级查询</el-button>
      <div class="inputs">
        <!-- <div style="margin-right:30px;">
          <input type="checkbox" :checked="Checkdata_one" @click="ClickCheck_one" /> 系统日志
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="Checkdata_two" @click="ClickCheck_two" /> 操作日志
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="Checkdata_three" @click="ClickCheck_three" /> 设备日志
        </div>-->
        <!-- 时间选择器 -->
        <!-- <div style="margin-right:30px;">
          <el-date-picker v-model="ChooseTime" type="month" placeholder="选择时间查看"></el-date-picker>
        </div>-->
        <div class="check" style="margin-right:10px;position:relative">
          <el-input v-model="inputvalue" placeholder="请输入搜索关键字" maxlength="15" style="width:330px;"></el-input>
          <i class="iconfont icon-sousuo" @click="CheckValue"></i>
        </div>
        <div>
          <i class="iconfont icon-shuaxin" @click="Toload"></i>
        </div>
      </div>
    </div>
    <div class="SeniorCheck" v-if="senior">
      <div class="CheckInput">
        <div style="margin-left:30px;margin-top:30px">类型:</div>
        <div style="margin-left:30px;margin-top:30px">
          <input type="checkbox" :checked="Checkdata_one" @click="ClickCheck_one" /> 系统日志
        </div>
        <div style="margin-left:30px;margin-top:30px">
          <input type="checkbox" :checked="Checkdata_two" @click="ClickCheck_two" /> 操作日志
        </div>
        <div style="margin-left:30px;margin-top:30px">
          <input type="checkbox" :checked="Checkdata_three" @click="ClickCheck_three" /> 设备日志
        </div>
      </div>
      <div class="Timer">
        <div style="margin-left:30px;margin-top:30px">对象:</div>
        <div style="margin-left:30px;margin-top:20px">
          <el-input placeholder="请输入对象" v-model="ObjectValue" clearable></el-input>
        </div>
      </div>
      <div class="Timer">
        <div style="margin-left:30px;margin-top:30px">时间日期:</div>
        <div style="margin-left:30px;margin-top:20px">
          <el-date-picker
            v-model="ChooseTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </div>
      <div style="margin-top:30px;margin-left:500px;">
        <el-button type="primary" size="mini" @click="CheckYes">搜索</el-button>
        <el-button type="primary" size="mini" @click="CloseCheck">关闭</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{background:'#F5F5F5'}"
      style="padding-left:20px;padding-right:20px;margin-top:20px;"
      show-overflow-tooltip
      :row-style="tableRowClassName"
    >
      <el-table-column
        v-for="(item,index) in tableTitle"
        :key="index"
        :prop="item.tableprop"
        :label="item.name"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Pages">
      <el-pagination
        :hide-on-single-page="true"
        :page-size="pagesize"
        :pager-count="9"
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <!-- 详情弹出框 -->
    <el-dialog :title="lognumber" center :visible.sync="dialog" width="800px">
      <el-form label-width="100px" :model="formone">
        <el-row>
          <el-col :span="12">
            <el-form-item label="事件ID:">
              <el-input v-model="formone.EventID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件区域:">
              <el-input v-model="formone.EventArea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发生时间:">
              <el-input v-model="formone.HappenTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源区域:">
              <el-input v-model="formone.ResourcesArea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作人员:">
              <el-input v-model="formone.Operator"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作人员ID:">
              <el-input v-model="formone.OperatorID"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事件名称:">
              <el-input v-model="formone.EventName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件描述:">
              <el-input v-model="formone.EventDescription"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="错误码:">
              <el-input v-model="formone.ErrorCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="错误描述:">
              <el-input v-model="formone.ErrorDescription"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称:">
              <el-input v-model="formone.EquipmentName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备ID:">
              <el-input v-model="formone.EquipmentID"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="数据详情:">
          <el-input type="textarea" v-model="formone.DataDetails"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button type="primary" size="medium" @click="Closedialog">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Nowlog",
  data() {
    return {
      inputvalue: "",
      Checkdata_one: false,
      Checkdata_two: false,
      Checkdata_three: false,
      pagesize: 10,
      total: 20,
      senior: false,
      ObjectValue: "",
      lognumber: "",
      dialog: false,
      ChooseTime: "",
      tableData: [
        {
          namevalue: "11111",
          timevalue: "2018-01-01",
          typevalue: "设备11",
          tosvalue: "摄像头001",
          eventvalue: "检测行李到达01",
          eventall: "完成事件",
          solute: "正常"
        },
        {
          namevalue: "22222",
          timevalue: "2018-01-02",
          typevalue: "设备22",
          tosvalue: "摄像头002",
          eventvalue: "检测行李到达02",
          eventall: "完成事件",
          solute: "正常"
        },
        {
          namevalue: "33333",
          timevalue: "2018-01-03",
          typevalue: "设备33",
          tosvalue: "摄像头003",
          eventvalue: "检测行李到达03",
          eventall: "完成事件",
          solute: "异常"
        },
        {
          namevalue: "44444",
          timevalue: "2018-01-04",
          typevalue: "设备44",
          tosvalue: "摄像头004",
          eventvalue: "检测行李到达04",
          eventall: "完成事件",
          solute: "正常"
        },
        {
          namevalue: "55555",
          timevalue: "2018-01-05",
          typevalue: "设备55",
          tosvalue: "摄像头005",
          eventvalue: "检测行李到达05",
          eventall: "完成事件",
          solute: "异常"
        },
        {
          namevalue: "66666",
          timevalue: "2018-01-06",
          typevalue: "设备66",
          tosvalue: "摄像头006",
          eventvalue: "检测行李到达06",
          eventall: "完成事件",
          solute: "正常"
        }
      ],
      tableTitle: [
        { name: "编号", tableprop: "namevalue" },
        { name: "发生时间", tableprop: "timevalue" },
        { name: "类型", tableprop: "typevalue" },
        { name: "对象", tableprop: "tosvalue" },
        { name: "事件", tableprop: "eventvalue" },
        { name: "事件描述", tableprop: "eventall" },
        { name: "结论", tableprop: "solute" }
      ],
      formone: {
        EventID: "",
        EventArea: "",
        HappenTime: "",
        ResourcesArea: "",
        Operator: "",
        OperatorID: "",
        EventName: "",
        EventDescription: "",
        ErrorCode: "",
        ErrorDescription: "",
        EquipmentName: "",
        EquipmentID: "",
        DataDetails: ""
      }
    };
  },
  methods: {
    //刷新
    Toload() {
      this.$router.go(0);
    },
    CheckValue() {
      alert("查询关键字");
    },
    //点击高级查询
    ClickFound() {
      this.senior = true;
    },
    //点击搜索
    CheckYes() {
      console.log(this.ChooseTime)
      this.senior = false;
    },
    //关闭高级查询
    CloseCheck() {
      this.senior = false;
    },
    //勾选
    ClickCheck_one() {
      if (this.Checkdata_one) {
        this.Checkdata_one = false;
      } else {
        this.Checkdata_one = true;
      }
    },
    ClickCheck_two() {
      if (this.Checkdata_two) {
        this.Checkdata_two = false;
      } else {
        this.Checkdata_two = true;
      }
    },
    ClickCheck_three() {
      if (this.Checkdata_three) {
        this.Checkdata_three = false;
      } else {
        this.Checkdata_three = true;
      }
    },
    handleClick(r) {
      console.log(r);
      this.dialog = true;
      this.lognumber = "日志" + r.namevalue + "详情";
      //将表单赋值
    },
    //表格字体变红
    tableRowClassName(row, rowIndex) {
      if (row.row.solute == "异常") {
        return { color: "red" };
      }
    },
    //分页
    current_change(currentPage) {
      console.log(currentPage);
    },
    //关闭弹窗
    Closedialog() {
      this.dialog = false;
    }
  },
  mounted() {
    
  },
  watch: {}
};
</script>

<style scoped>
#historylog {
  position: relative;
}
.top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.inputs {
  height: 40px;
  margin-right: 10px;
  display: flex;
  justify-content: space-between;
}
.inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check > i {
  position: absolute;
  right: 20px;
}
.SeniorCheck {
  padding-left: 20px;
  padding-right: 20px;
}
.CheckInput {
  display: flex;
}
.Timer {
  display: flex;
}
.Pages {
  position: absolute;
  margin-top: 50px;
  right: 200px;
}
</style>